<template>
	<view class="group-oil">
		<view class="oil-top">
			<view class="top-one">
				<!-- logo -->
				<view class="top-tops" @click="jumpLogo()">
					<view class="tops-img">
						<image src="../../static/jij_03.png" mode="widthFix"></image>
					</view>
					<view class="tops-tit">
						<h3>团又放心加.加油有保险 </h3>
						<p>品质保障 | 加油保险 | 先行赔付 </p>
					</view>
				</view>
				<!-- 搜索框 -->
				<view class="switchSign"></view>
				<view class="search-box" @click="jumpSearch()" :class="{'flex-top':topfixed==1}">
					<view class="top-search flex" :class="{'topfixed-active':topfixed==1}">
						<view class="search-left">
							<!-- <view class="search-img">
								<image src="../../static/search.png" mode="widthFix"></image>
							</view> -->
							<p class="search-font">搜索油站</p>
						</view>
						<view class="search-butt">搜索</view>
					</view>

				</view>
				<!-- swiper 滑动框 -->
				<view class="uni-margin-wrap banner">
					<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
						:interval="interval" :duration="duration" indicator-color='#ccc' indicator-active-color='#fff'>
						<swiper-item v-for="(item,index) in banerSweiper" :key="index" @click="jumpBnner(item.id)">
							<view class="swiper-item uni-bg-red">
								<image :src="item.src" mode="scaleToFill"></image>
							</view>
						</swiper-item>

					</swiper>
				</view>
				<!-- 省钱会员 -->
				<view class="top-list">
					<scroll-view class="scroll-view_H" scroll-x="true">
						<view id="demo1" class="scroll-view-item_H " v-for="(item,index) in saveMoney" :key="item.id"
							@click='jumpSave(item.id)'>
							<dl class='list-cont'>
								<dt>
									<image :src="item.src" mode="widthFix" class="iconBig"></image>
								</dt>
								<dd>{{item.title}}</dd>
							</dl>
						</view>
						<!-- <view class="demo2"></view> -->
					</scroll-view>
				</view>
			</view>
			<!-- 优惠券 -->
			<view class="top-coupon flex">
				<view class="coupon-img" v-for="(item,index) in coupon" :key="item.id">
					<image :src="item.src" mode="widthFix" @click="save()"></image>
				</view>
			</view>
			<!-- 精选 -->
			<view class="top-selected  flex">
				<!-- 头部标题 -->
				<view class="switchSign2"></view>
				<view class="" :class="{'flex-sele':topfixed1==1}">
					<view class="selected-top flex">
						<view class="selected-title">
							<p>精选</p>
							<p>筛选</p>
							<p>排序</p>
						</view>
						<view class="selected-standard">
							<!--  -->
							<sl-filter :themeColor="themeColor" :menuList="menuList" @result="result" class='yopposi' ></sl-filter>
						</view>
					</view>
					<view class="selected-center ">
						<view :class="[current == index ? 'active': '']" v-for="(item,index) in preferred" :key="index"
							@click="optionsToggle(index)" >
							{{item}}
						</view>
					</view>
				</view>
			</view>
			<!-- 内容 -->
			<view class="selected-bottom ">
				<view class="gas-station" v-for="(item,index) in gasStation" :key="index" v-show="index==current">
					<view class="gas-stations" v-for="(items,indexs) in item" @click="detail(indexs)">
						<view class="stations-top">
							<view class="sta-left-name ">
								<view class="sta-left-names">{{items.gasName}}</view>
								<view class="sta-left-yx">优选</view>
							</view>
							<view class="flex">
								<view class="sta-left-posi">
									{{items.position}}
								</view>
								<view class="sta-left-kilo">
									{{items.distance}}
								</view>
							</view>
							<view class="sta-price">
								<view class="sta-price-new">
									￥ <text class="big">{{items.price}}</text>/L
								</view>
								<view class="sta-price-older">
									{{items.originalPrice}}
								</view>
							</view>
							<view class="sta-bottom flex">
								<view class="bot-left">
									<view class="left-top">完单返加油金 <text>{{items.rebate}}</text> /升</view>
									<view class="bot-bot">{{items.accumulate}}</view>
								</view>
								<view class="bot-right">立即加油</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>

	</view>

	</view>
</template>

<script>
import slFilter from '../../components/songlazy-sl-filter/sl-filter/sl-filter.vue';
	export default {
		components:{
			slFilter
		},
		data() {
			return {
				//banner滑动
				banerSweiper: [
					{id: 1,src: '../../static/banner1.png'},
					{id: 2,src: '../../static/banner2.png'},
					{id: 3,src: '../../static/banner3.png'}
				],
				indicatorDots: true,
				autoplay: true,
				indicatorDots2: false,
				autoplay2: false,
				interval: 2000,
				duration: 500,
				value: '',
				// 搜索
				topfixed: 0,
				topfixed1: 0,
				// 省钱
				saveMoney: [{
						id: 1,
						src: '../../static/ty.png',
						title: '团油养车'
					},
					{
						id: 2,
						src: '../../static/ty4.png',
						title: '省钱会员'
					},
					{
						id: 3,
						src: '../../static/ty5.png',
						title: '签到'
					},
					{
						id: 4,
						src: '../../static/ty6.png',
						title: '认证有奖'
					},
					{
						id: 5,
						src: '../../static/ty7.png',
						title: '转盘抽奖'
					},
					{
						id: 6,
						src: '../../static/ty8.png',
						title: '外卖红包'
					},
					{
						id: 7,
						src: '../../static/ty9.png',
						title: '重要信息'
					},
				],
				// 优惠券
				coupon: [{
						id: 1,
						src: '../../static/d1_03.png'
					},
					{
						id: 2,
						src: '../../static/d1_05.png'
					}
				],
				// 精选
				standard: [{
						id: 1,
						tit: '92#筛选'
					},
					{
						id: 2,
						tit: '智能排序'
					}
				],
				// 团油优选
				current: 0,
				preferred: ['团油优选', '多加多送', '加油返券', '免费洗车'],
				// 加油站
				gasStation: [
					[{
							gasName: '小海豚加油站（桃花峪站）',
							position: '东岳大街西段山和院子',
							distance: '6.11km',
							price: '6.88',
							originalPrice: '油站价￥7.68/L',
							rebate: '0.80',
							accumulate: '累计消费返豪礼',

						},
						{
							gasName: '金城加油站（济南）',
							position: '党家庄镇县邵而庄西村以东',
							distance: '6.11km',
							price: '7.45',
							originalPrice: '油站价￥7.68/L',
							rebate: '0.80',
							accumulate: '累计消费返豪礼',

						}, {
							gasName: '中胜石油东岳大街站',
							position: '东岳大街西段山和院子',
							distance: '6.11km',
							price: '6.88',
							originalPrice: '油站价￥7.68/L',
							rebate: '0.80',
							accumulate: '累计消费返豪礼',

						}, {
							gasName: '京博石化济南50站',
							position: '东岳大街西段山和院子',
							distance: '6.11km',
							price: '6.88',
							originalPrice: '油站价￥7.68/L',
							rebate: '0.80',
							accumulate: '累计消费返豪礼',

						}, {
							gasName: '中远石油文庄加油站',
							position: '东岳大街西段山和院子',
							distance: '6.11km',
							price: '6.88',
							originalPrice: '油站价￥7.68/L',
							rebate: '0.80',
							accumulate: '累计消费返豪礼',

						}
					],
					[{
							gasName: '金城加油站（济南）',
							position: '东岳大街西段山和院子',
							distance: '6.11km',
							price: '6.88',
							originalPrice: '油站价￥7.68/L',
							rebate: '0.80',
							accumulate: '累计消费返豪礼',

						},
						{
							gasName: '小海豚加油站（桃花峪站）',
							position: '党家庄镇县邵而庄西村以东',
							distance: '6.11km',
							price: '7.45L',
							originalPrice: '油站价￥7.68/L',
							rebate: '0.80',
							accumulate: '累计消费返豪礼',

						}, {
							gasName: '中胜石油东岳大街站',
							position: '东岳大街西段山和院子',
							distance: '6.11km',
							price: '6.88',
							originalPrice: '油站价￥7.68/L',
							rebate: '0.80',
							accumulate: '累计消费返豪礼',

						}, {
							gasName: '京博石化济南50站',
							position: '东岳大街西段山和院子',
							distance: '6.11km',
							price: '6.88',
							originalPrice: '油站价￥7.68/L',
							rebate: '0.80',
							accumulate: '累计消费返豪礼',

						}, {
							gasName: '中远石油文庄加油站',
							position: '东岳大街西段山和院子',
							distance: '6.11km',
							price: '6.88',
							originalPrice: '油站价￥7.68/L',
							rebate: '0.80',
							accumulate: '累计消费返豪礼',

						}
					],
					[{
							gasName: '京博石化济南50站',
							position: '东岳大街西段山和院子',
							distance: '6.11km',
							price: '6.88',
							originalPrice: '油站价￥7.68/L',
							rebate: '0.80',
							accumulate: '累计消费返豪礼',

						},
						{
							gasName: '金城加油站（济南）',
							position: '党家庄镇县邵而庄西村以东',
							distance: '6.11km',
							price: '7.45',
							originalPrice: '油站价￥7.68/L',
							rebate: '0.80',
							accumulate: '累计消费返豪礼',

						}, {
							gasName: '中胜石油东岳大街站',
							position: '东岳大街西段山和院子',
							distance: '6.11km',
							price: '6.88',
							originalPrice: '油站价￥7.68/L',
							rebate: '0.80',
							accumulate: '累计消费返豪礼',

						}, {
							gasName: '小海豚加油站（桃花峪站）',
							position: '东岳大街西段山和院子',
							distance: '6.11km',
							price: '6.88/L',
							originalPrice: '油站价￥7.68/L',
							rebate: '0.80',
							accumulate: '累计消费返豪礼',

						}, {
							gasName: '中远石油文庄加油站',
							position: '东岳大街西段山和院子',
							distance: '6.11km',
							price: '6.88',
							originalPrice: '油站价￥7.68/L',
							rebate: '0.80',
							accumulate: '累计消费返豪礼',

						}
					],
					[{
							gasName: '中远石油文庄加油站',
							position: '东岳大街西段山和院子',
							distance: '6.11km',
							price: '6.88',
							originalPrice: '油站价￥7.68/L',
							rebate: '0.80',
							accumulate: '累计消费返豪礼',

						},
						{
							gasName: '金城加油站（济南）',
							position: '党家庄镇县邵而庄西村以东',
							distance: '6.11km',
							price: '7.45',
							originalPrice: '油站价￥7.68/L',
							rebate: '0.80',
							accumulate: '累计消费返豪礼',

						}, {
							gasName: '中胜石油东岳大街站',
							position: '东岳大街西段山和院子',
							distance: '6.11km',
							price: '6.88',
							originalPrice: '油站价￥7.68/L',
							rebate: '0.80',
							accumulate: '累计消费返豪礼',

						}, {
							gasName: '京博石化济南50站',
							position: '东岳大街西段山和院子',
							distance: '6.11km',
							price: '6.88',
							originalPrice: '油站价￥7.68/L',
							rebate: '0.80',
							accumulate: '累计消费返豪礼',

						}, {
							gasName: '小海豚加油站（桃花峪站）',
							position: '东岳大街西段山和院子',
							distance: '6.11km',
							price: '6.88',
							originalPrice: '油站价￥7.68/L',
							rebate: '0.80',
							accumulate: '累计消费返豪礼',

						}
					],
					[{
							gasName: '中胜石油东岳大街站',
							position: '东岳大街西段山和院子',
							distance: '6.11km',
							price: '6.88',
							originalPrice: '油站价￥7.68/L',
							rebate: '0.80',
							accumulate: '累计消费返豪礼',

						},
						{
							gasName: '金城加油站（济南）',
							position: '党家庄镇县邵而庄西村以东',
							distance: '6.11km',
							price: '7.45',
							originalPrice: '油站价￥7.68/L',
							rebate: '0.80',
							accumulate: '累计消费返豪礼',

						}, {
							gasName: '',
							position: '东岳大街西段山和院子',
							distance: '6.11km',
							price: '6.88',
							originalPrice: '油站价￥7.68/L',
							rebate: '0.80',
							accumulate: '累计消费返豪礼',

						}, {
							gasName: '京博石化济南50站',
							position: '东岳大街西段山和院子',
							distance: '6.11km',
							price: '6.88',
							originalPrice: '油站价￥7.68/L',
							rebate: '0.80',
							accumulate: '累计消费返豪礼',

						}, {
							gasName: '中远石油文庄加油站',
							position: '东岳大街西段山和院子',
							distance: '6.11km',
							price: '6.88',
							originalPrice: '油站价￥7.68/L',
							rebate: '0.80',
							accumulate: '累计消费返豪礼',

						}
					],

				],
				// 筛选条件
				themeColor: '#FF1C1C',
				filterResult: '',
				menuList: [
					// 油号
					{
						'title': '92#筛选',
						'detailTitle': '油号选择',
						'isMutiple': false,
						'key': 'jobType',
						'detailList': [{
								'title': '90#',
								'value': '90#'
							},
							{
								'title': '92#',
								'value': '92#'
							},
							{
								'title': '95#',
								'value': '95#'
							},
							{
								'title': '98#',
								'value': '98#'
							},
							{
								'title': '101#',
								'value': '101#'
							},
							{
								'title': '95(甲醇)#',
								'value': '95(甲醇)#'
							},
							{
								'title': '92(甲醇)#',
								'value': '92(甲醇)#'
							},
							{
								'title': '-40#',
								'value': '-40#'
							},
							{
								'title': '-35#',
								'value': '-35#'
							},
							{
								'title': '-30#',
								'value': '-30#'
							},
							{
								'title': '-20#',
								'value': '-20#'
							},
							{
								'title': '-10#',
								'value': '-10#'
							},
							{
								'title': '0#',
								'value': '0#'
							},
							{
								'title': 'CNG',
								'value': 'CNG'
							},
							{
								'title': 'LNG',
								'value': 'LNG'
							},
							{
								'title': 'LPG',
								'value': 'LPG'
							},


						]
					},
					// 月薪
					{
						'title': '智能排序',
						'key': 'salary',
						'isMutiple': false,
						'detailTitle': '',
						'detailList': [{
								'title': '智能排序',
								'value': '智能排序'
							},
							{
								'title': '距离优先',
								'value': '距离优先'
							},
							{
								'title': '价格优先',
								'value': '价格优先'
							}
						]

					},
				],	
				// 

			}
		},
		// 页面滚动
		onPageScroll(res) {
			var _this = this
			var temptop;
			const query = uni.createSelectorQuery();
			query.select('.switchSign').boundingClientRect();
			query.selectViewport().scrollOffset();
			query.exec(function(res) {
				res[0].top // .switchSign节点距离上边界的坐标
				res[1].scrollTop // 显示区域的竖直滚动位置
				temptop = res[0].top;
				if (temptop <= '2') {
					_this.topfixed = 1;
					_this.topfixed1 = 1;
				} else {
					_this.topfixed = 0;
					_this.topfixed1 = 0;

				}
			})
		},
		onLoad() {},
		// 定义方法
		methods: {
			// logo跳转
			jumpLogo: function() {
				uni.navigateTo({
					url: '/pages/index/jiaYB'
				})
			},

			// 跳转到搜索页
			jumpSearch: function() {
				uni.navigateTo({
					url: '/pages/index_two/search'
				})
			},
			// banner跳转
			jumpBnner: function(id) {
				if (id == 1) {
					uni.switchTab({
						// 省钱专区
						url: '../quan/quan'
					})
				} else if (id == 2) {
					uni.navigateTo({
						// 福利中心
						url: "/pages/me/qian"
					})
				} else {
					uni.navigateTo({
						// 团油养车
						url: '/pages/index/tuanY'
					})
				}
			},
			// 优惠券
			save: function() {
				uni.switchTab({
					url: "../quan/quan"
				})
			},

			// 省钱专区跳转页面
			jumpSave: function(id) {
				console.log(id)
				if (id == 1) {
					uni.navigateTo({
						// 团油养车
						url: '/pages/index/tuanY'
					})

				} else if (id == 2) {
					uni.navigateTo({
						// 省钱会员
						url: "/pages/me/huiyuan"
					})

				} else if (id == 3) {
					uni.navigateTo({
						// 签到中心
						url: "/pages/me/qian"
					})

				} else if (id == 4) {
					uni.navigateTo({
						// 认证有奖
						url: "/pages/index/renZ"
					})


				} else if (id == 5) {
					uni.navigateTo({
						//转盘抽奖
						url: "/pages/index/choujiang"
					})


				} else if (id == 6) {
					uni.navigateTo({
						// 外卖红包
						url: "/pages/index/waiM"
					})


				} else {
					uni.navigateTo({
						// 重要通知
						url: "/pages/index/zhongY"
					})
				}
			},
			// 弹出框筛选
			result(val) {
				console.log('filter_result:' + JSON.stringify(val));
				this.filterResult = JSON.stringify(val, null, 2)
			},

			// 精选选项切换
			optionsToggle: function(index) {
				this.current = index
			},
			// 油站详情页
			detail: function(id) {
				uni.navigateTo({
					url: "/pages/index_two/selected-details(1)"
				})
			},

		}
	}
</script>
<!-- 引用样式 -->
<style>
	@import url("index1.css");
</style>
